<template>
  <div>
    <DraggableBox
      v-for="box in boxes"
      :key="box.id"
      @delete="deleteBox(box.id)"
      :style="{ zIndex: box.zIndex }"
      ref="setBoxRef"
    >
      <div>这是第 {{ box.id }} 个可拖拽盒子</div>
    </DraggableBox>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import DraggableBox from './components/DraggableBox.vue'

interface Box {
  id: number
  zIndex: number
}

const boxes = reactive<Box[]>([
  { id: 1, zIndex: 1 },
  { id: 2, zIndex: 1 },
  { id: 3, zIndex: 1 },
  { id: 4, zIndex: 1 }
])

const deleteBox = (id: number) => {
  const index = boxes.findIndex(box => box.id === id)
  if (index !== -1) {
    boxes.splice(index, 1)
  }
}
</script>

<style>
body, html, #app {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
</style>
